<template>
	<view class="event-help-details">
		<!-- #ifdef  APP-PLUS -->
		<cover-view  class="back-last-page" :style="'top: ' + navTabtop + 'px'" @click="goBackPage">>
			<cover-image class="image-back" src="../../../static/images/bus/icon_back_left.png" ></cover-image>
		</cover-view> 
		<!-- #endif -->
		<!-- #ifndef  APP-PLUS -->
		<view class="back-last-page" :style="'top: ' + navTabtop + 'px'" @click="goBackPage">
		  <image class="image-back" src="../../../static/images/bus/icon_back_left.png" ></image>
		</view>
		<!-- #endif -->
		<view class="map-content" :style="'height:' + (mapHeight-30) + 'px'">
			<map  class="map-gis" id="mapGis" ref="mapGis" :show-scale="true" :enable-poi="true" :show-location="true"
				:enable-building="true" :enable-auto-max-overlooking="true" :enable-3D="true" :enable-overlooking="twoThree"
				 :enable-rotate="true" :enable-indoorMap="true"
				:scale="scale" :longitude="longitude" :latitude="latitude"
				:markers="markers" :polyline="polyline" 
				 @regionchange="bindregionchange" @markertap="markerTap"   :include-points="includePoints" 
				> 
				</map>
		</view>
		
		<!-- #ifdef  APP-PLUS -->
		<movable-area class="move-content" @touchmove.stop>
			<movable-view class="move-incontent shadow" :style="'height:' + movableHeight + 'px'" :y="initY" inertia
				:damping="10" :friction="1" direction="vertical" :animation="false" @change="movableChange"
				@touchend="touchEnd">
				<!-- <view class="move-drag-ico" @click.stop="openHide">
					<image class="drag-img" :class="{'drag-transform':drageIco == 'down'}" src="../../static/down.png"
						mode=""></image>
				</view> -->
				<cover-view style="z-index: 100000;" class="display-flex-column display-flex display-flex-align-center display-flex-justify-center icon-action quanlan">
					<cover-image @click.stop="getLookAll" style="height: 24px;width: 24px;" src="../../../static/images/bus/quanlan.png"></cover-image>
					<!-- <cover-view class="" style="margin-bottom: 3px;" >
						全览
					</cover-view> -->
				</cover-view>
				<cover-view class="display-flex-column display-flex display-flex-align-center display-flex-justify-center icon-action gpslocation">
					<cover-image @click.stop="getMyLocation" style="height: 28px;width: 28px;" src="../../../static/images/bus/gps.png"></cover-image>
		
				</cover-view>
				
				<view class="slide-bar">
					<view class="line-bar"></view>
				</view>
				<view class="line-title">
				    <view class="name">{{lineInfo.lineSn}}</view>
				</view>
				<view class="line-station">
				    <view class="name">{{lineInfo.origin}}</view>
				    <image class="icon-arrow-b" src="../../../static/images/bus/arrow_grey.png"></image>
				    <view class="name">{{lineInfo.destination||''}}</view>
				</view>
				<view class="line-duration">
				    <view class="line-seat-text">{{lineInfo.seatType==1?"一人一座":"不限座"||''}}</view>
				    <view class="line-distance"> 全程{{lineInfo.distanceDesc||0}}公里 · 预计耗时{{lineInfo.duration||0}}分钟 </view>
				</view>
				<view class="line-zd">
					<scroll-view enable-flex class="scroll_view" :scroll-left="scrollLeft" :scroll-with-animation="true" :scroll-x="true" :show-scrollbar="false">
					    <view class="line_wrapper" >
					        <view v-for="(item, index) in stationList" :key="index" class="line_s" :id="'stop_' + item.id">		           
					            <view class="bar">
					                <view :class="'bar_line ' + (index===0?'start_s':index===stationList.length-1?'end':'')" :style="'background: ' + item.color + ';'">
					                    <image class="bar_arrow" src="../../../static/images/bus/icon_line_arrow.png"></image>
					                </view>
					                <image class="line_stop_pos station-icon" src="../../../static/images/bus/icon_line_on.png" v-if="item.stopType===1&&selectStationIndex != index"></image>
					                <image class="line_stop_pos station-icon" src="../../../static/images/bus/icon_line_on_off.png" v-if="item.stopType===3&&selectStationIndex != index"></image>
					                <image class="line_stop_pos station-icon" src="../../../static/images/bus/icon_line_off.png" v-if="item.stopType===2&&selectStationIndex != index"></image>
									 <block v-if="selectStationIndex == index">
										 <image class="line_stop_pos station-icon selected" src="../../../static/images/bus/icon_line_selected_on.png" v-if="item.stopType===1"></image>
										 <image class="line_stop_pos station-icon selected" src="../../../static/images/bus/icon_line_selected_on_off.png" v-if="item.stopType===3"></image>
										 <image class="line_stop_pos station-icon selected" src="../../../static/images/bus/icon_line_selected_off.png" v-if="item.stopType===2"></image>
									 </block>
								
					                <view class="station">
					                    <view @click="changeStation(index)" :class="'station_name ' + (selectStationIndex == index?'active':'')" :data-index="index" :data-item="item" style="position:relative;z-index:90;">
					                        <view :class="item.stopType">{{item.stopName|formatStopName}}</view>
					                        <image class="icon" src="../../../static/images/bus/subway.png" v-if="item.subway"></image>
					                        <image @click.stop="goHere(item)" class="icon"  src="../../../static/images/bus/daohang.png" v-if="selectStationIndex == index"></image>
					                    </view>
					                    <view class="nearest-text"  v-if="nearestStation.id===item.id" style="border: 1px solid #00aa00;" > 离我最近 </view>
					                   <view @click="setScrollLeft(index)" class="hover_station left" v-if="selectStationIndex == index&&leftShow">
					                        <view class="iconfont icon-jiantou_xiangzuoliangci"></view>
											<view class="name ">{{item.stopName|formatStopName}}</view>
					                    </view>
					                    <view @click="setScrollLeft(index)" class="hover_station right" v-if="selectStationIndex == index&&rightShow">
					                        <view class="iconfont icon-jiantou_xiangyouliangci"></view>
											<view class="name">{{item.stopName|formatStopName}}</view>
					                    </view>
					                </view>
					            </view>
					        </view>
					    </view>
					</scroll-view>
				</view>
			</movable-view>
		</movable-area>
		
		<!-- #endif -->
		<!-- #ifndef  APP-PLUS -->
		<movable-area class="move-content" @touchmove.stop>
			<movable-view class="move-incontent shadow" :style="'height:' + movableHeight + 'px'" :y="initY" inertia
				:damping="10" :friction="1" direction="vertical" :animation="false" @change="movableChange"
				@touchend="touchEnd">
				<!-- <view class="move-drag-ico" @click.stop="openHide">
					<image class="drag-img" :class="{'drag-transform':drageIco == 'down'}" src="../../static/down.png"
						mode=""></image>
				</view> -->
				<view style="z-index: 100000;" class="display-flex-column display-flex display-flex-align-center display-flex-justify-center icon-action quanlan">
					<image @click.stop="getLookAll" style="height: 24px;width: 24px;" src="../../../static/images/bus/quanlan.png"></image>
					<view class="" style="font-size: 8px;">
						全览
					</view>
				</view>
				<view class="display-flex-column display-flex display-flex-align-center display-flex-justify-center icon-action gpslocation">
					<image @click.stop="getMyLocation" style="height: 28px;width: 28px;" src="../../../static/images/bus/gps.png"></image>

				</view>
			<!-- 	<view @click.stop="open3D" class="display-flex-column display-flex display-flex-align-center display-flex-justify-center icon-action twothree">
					<view style="color: #000;font-size: 20px;">
						3D
					</view>
				</view> -->
				
				<!-- <image @tap="getMyLocation" class="icon-action location" src="../../../static/images/bus/icon_gps_location.png"></image> -->
				
				<view class="slide-bar">
					<view class="line-bar"></view>
				</view>
				<view class="line-title">
				    <view class="name">{{lineInfo.lineSn}}</view>
				</view>
				<view class="line-station">
				    <view class="name">{{lineInfo.origin}}</view>
				    <image class="icon-arrow-b" src="../../../static/images/bus/arrow_grey.png"></image>
				    <view class="name">{{lineInfo.destination||''}}</view>
				</view>
				<view class="line-duration">
				    <view class="line-seat-text">{{lineInfo.seatType==1?"一人一座":"不限座"||''}}</view>
				    <view class="line-distance"> 全程{{lineInfo.distanceDesc||0}}公里 · 预计耗时{{lineInfo.duration||0}}分钟 </view>
				</view>
				<view class="line-zd">
					<scroll-view enable-flex class="scroll_view" :scroll-left="scrollLeft" :scroll-with-animation="true" :scroll-x="true" :show-scrollbar="false">
					    <view class="line_wrapper" >
					        <view v-for="(item, index) in stationList" :key="index" class="line_s" :id="'stop_' + item.id">		           
					            <view class="bar">
					                <view :class="'bar_line ' + (index===0?'start_s':index===stationList.length-1?'end':'')" :style="'background: ' + item.color + ';'">
					                    <image class="bar_arrow" src="../../../static/images/bus/icon_line_arrow.png"></image>
					                </view>
					                <image class="line_stop_pos station-icon" src="../../../static/images/bus/icon_line_on.png" v-if="item.stopType===1&&selectStationIndex != index"></image>
					                <image class="line_stop_pos station-icon" src="../../../static/images/bus/icon_line_on_off.png" v-if="item.stopType===3&&selectStationIndex != index"></image>
					                <image class="line_stop_pos station-icon" src="../../../static/images/bus/icon_line_off.png" v-if="item.stopType===2&&selectStationIndex != index"></image>
									 <block v-if="selectStationIndex == index">
										 <image class="line_stop_pos station-icon selected" src="../../../static/images/bus/icon_line_selected_on.png" v-if="item.stopType===1"></image>
										 <image class="line_stop_pos station-icon selected" src="../../../static/images/bus/icon_line_selected_on_off.png" v-if="item.stopType===3"></image>
										 <image class="line_stop_pos station-icon selected" src="../../../static/images/bus/icon_line_selected_off.png" v-if="item.stopType===2"></image>
									 </block>
								
					                <view class="station">
					                    <view @click="changeStation(index)" :class="'station_name ' + (selectStationIndex == index?'active':'')" :data-index="index" :data-item="item" style="position:relative;z-index:90;">
					                        <view :class="item.stopType">{{item.stopName|formatStopName}}</view>
					                        <image class="icon" src="../../../static/images/bus/subway.png" v-if="item.subway"></image>
					                        <image @click.stop="goHere(item)" class="icon"  src="../../../static/images/bus/daohang.png" v-if="selectStationIndex == index"></image>
											<image @click="yulan(item.image)" v-if="item.image.length&&selectStationIndex == index" class="icon"  src="../../../static/images/bus/zxj.png" ></image>
					                    </view>
					                    <view class="nearest-text"  v-if="nearestStation.id===item.id" style="border: 1px solid #00aa00;" > 离我最近 </view>
					                   <view @click="setScrollLeft(index)" class="hover_station left" v-if="selectStationIndex == index&&leftShow">
					                        <view class="iconfont icon-jiantou_xiangzuoliangci"></view>
											<view class="name ">{{item.stopName|formatStopName}}</view>
					                    </view>
					                    <view @click="setScrollLeft(index)" class="hover_station right" v-if="selectStationIndex == index&&rightShow">
					                        <view class="iconfont icon-jiantou_xiangyouliangci"></view>
											<view class="name">{{item.stopName|formatStopName}}</view>
					                    </view>
					                </view>
					            </view>
					        </view>
					    </view>
					</scroll-view>
				</view>
				<!-- <view class="move-infos-body" style="height: calc(100% - 50px);">
					<scroll-view style="height: 100%;" :scroll-y="initY == canDragTop">
						<view class="" v-for="i in 10">{{ i }}</view>
					</scroll-view>
 
				</view> -->
 
				<!-- <video src="https://grid.wanhi.com.cn:65417/file/1650703977267/grid/eventhelp/20220623/1539819981196234754.mp4"></video> -->
			</movable-view>
		</movable-area>
		
		<!-- #endif -->
		
		<view class="buy-btn-wrapper">
		    <view class="action-group">
		        <view @click="setCollect" class="btn collect">
					<view class="iconfont icon-foot icon-foot-active"  v-if="lineInfo.userCollect">
						&#xe12;
					</view>
					<view v-else class="iconfont icon-foot">
						&#xecb3;
					</view>
		            <view>收藏线路</view>
		        </view>
				<!-- #ifdef MP -->
		        <button  class="btn share" open-type="share">
					<view class="iconfont icon-foot">
						&#xe5b2;
					</view>
		            <view>分享线路</view>
		        </button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button  class="btn share" @click="listenerActionSheet">
					<view class="iconfont icon-foot">
						&#xe5b2;
					</view>
				    <view>分享线路</view>
				</button>
				<!-- #endif -->
		        <view @click="openWxKf" class="btn qrcode">
					<view class="iconfont  icon-foot">
						&#xe5;
					</view>
		            <view>联系客服</view>
		        </view>
		    </view>
		    <block >
		        <view  @click="goBuy"  class="buy-btn"> ￥{{lineInfo.discountPrice||0}}</view>
		        <!-- <view class="buy-btn disable">临时停运</view> -->
		    </block>
		</view>
		
	</view>
</template>
 
<script>
		import { HTTP_REQUEST_URL } from '@/config/app';
	import {
		openKf
	} from "@/utils";
	import {
		getLineDetail,
		collectLine,
	} from '@/api/bus.js';
	import b_util from "@/common/js/busutil.js"
	import { mapGetters } from "vuex";
	import {toLogin} from '@/libs/login.js';
	export default {
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		data() {
			return {
				isAuto: true, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				stationList: [],
				scrollLeft: 0,
				leftShow: 0,
				rightShow: 0,
				navTabtop: 20,
				twoThree: false,
				latitude: "26.600325",
				longitude: "106.705484",
				scale: 8,
				markers: [],
				polyline: [],
				points:[],
				includePoints: [],
				windowHeight: 800,
				windowWidth: 375,
				mapHeight: 300,
				cHeightNum: 0,
				movableHeight: 800,
				canDragTop: 0,
				initY: 0,
				dragY: 0,
				drageIco: 'up',
				line_id: '',
				lineInfo:{}, 
				map: {},
				nearestStation: {},
				systemType:'',
				selectStation: {}, //选中的站点
				selectStationIndex: 0, //选中的站点索引
				selectMarkers: [],
				observe: null,
				moveFlag: true,
				statusBarHeight: 0,
				pixelRatio: 0,
			};
		},
	    filters: {
	    	formatStopName(value) {
	    	  return value.replace('-', ' - ').replace( new RegExp('(\x5c(|（)', 'g'), '︵').replace( new RegExp('(\x5c)|）)', 'g'), '︶');
	    	}
	    },
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			var systemInfo =  uni.getSystemInfoSync();
			this.map = uni.createMapContext("mapGis");
			// #ifdef MP
			let menuButton = uni.getMenuButtonBoundingClientRect();
			this.navTabtop = menuButton.top;
			// #endif
			// #ifdef H5 || APP-PLUS
			this.navTabtop = 43;
			// #endif
			this.windowHeight = systemInfo.windowHeight
			this.windowWidth = systemInfo.windowWidth
            this.systemType =	systemInfo.system && systemInfo.system.indexOf("iOS") > -1 ? "IOS" : systemInfo.system && systemInfo.system.indexOf("Android") > -1 ? "ANDROID" : "OTHER";
            this.statusBarHeight =  systemInfo.statusBarHeight
			this.pixelRatio = systemInfo.pixelRatio
	// 		this.mapHeight = this.windowHeight - 180;
	// 		this.movableHeight = this.windowHeight - 250
	// 		this.cHeightNum = this.windowHeight - 180;
	// 		this.initY = -(this.windowHeight - 250 - 180);
	// 		this.canDragTop = -(this.windowHeight - 250 - 180)
			console.log('systemInfo',systemInfo)		
			 // this.mapHeight = this.windowHeight- 130;
			 // #ifdef  APP-PLUS
			 this.scale = 10
			 this.mapHeight = this.windowHeight- this.windowHeight/3-this.statusBarHeight/this.pixelRatio - 130;
			 // #endif
			 // #ifndef  APP-PLUS
			 this.mapHeight = this.windowHeight- 130;
			 // #endif
			 
			 this.movableHeight = this.windowHeight- this.statusBarHeight/this.pixelRatio - 60
			 this.cHeightNum = this.windowHeight - 180;
			 this.initY = -(this.windowHeight/3);
			 this.canDragTop = -(this.windowHeight - 250 - 180)
  
			this.dragY = 0
			
			if (!options.line_id) {
				return this.$util.Tips({
					title: '缺少参数无法查看'
				}, {
					tab: 3,
					url: 1
				});
			} else {
				this.line_id = options.line_id;
			}
			
			this.getLineDetail()
		},
		onReady() {
			var that = this;
			
		},
		onShow(){
			// #ifdef MP-ALIPAY
			my.hideBackHome();
			// #endif
		},
		watch: {
		  // selectStationIndex: {
		  //   handler: function (newV,oldV) {
		  //     if (newV) {
				//   console.log(newV)
				//    console.log(newV !== oldV)
				//   if(newV !== oldV){
				// 	this.setScrollLeft(newV);
				// 	this.watchStationName();
				// 	this.$set(this,'leftShow', 0)
				// 	this.$set(this,'rightShow', 0)
				//   }
		  //     }
		  //   },
		  //   immediate: true,
		  //   deep: true
		  // }
	
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			return {
				title: that.lineInfo.line_name || '',
				path: '/pages/bus/line_info/index?line_id=' + that.line_id + '&spid=' + that.uid
			};
		},
		// #endif
		methods: {
			goBuy(){
				if(!this.line_id){
					return this.$util.Tips({
						title: '缺少参数无法查看'
					}, {
						tab: 3,
						url: 1
					});
				}
				
				uni.navigateTo({
					url:'/pages/bus/regular_list/index?line_id='+this.line_id
				})
			},
			listenerActionSheet(){
				this.appShare('WXSceneSession');
			},
			// app分享
			// #ifdef APP-PLUS
			appShare(scene) {
				let that = this
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: `${HTTP_REQUEST_URL}${curRoute}&spread=${that.uid}`,
					title: that.lineInfo.line_sn,
					summary: that.lineInfo.line_name,
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						})
						that.posters = false;
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
						that.posters = false;
					}
				});
			},
			// #endif
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true
			},
			// 授权回调
			onLoadFun() {
				
				this.isShowAuth = false
			},
			setCollect: function() {
				if (this.isLogin === false) {
					toLogin()
				} else {
					let that = this;
					let data = {
						lineId: this.line_id,
						type: 1,
						cityId: this.lineInfo.cityId, 
						ctype: 'collect',
					}
					console.log(data)
					if (this.lineInfo.userCollect) {
						data.opr = 0
						
						collectLine(data).then(res => {
							that.$set(that.lineInfo, 'userCollect', !that.lineInfo.userCollect);
							return that.$util.Tips({
								title: '取消收藏成功'
							}); 
						});
					} else {
						data.opr = 1
						collectLine(data).then(res => {
							that.$set(that.lineInfo, 'userCollect', !that.lineInfo.userCollect);
							return that.$util.Tips({
								title: '收藏成功'
							});
						});
					}
				}
			},
			open3D(){
				this.twoThree = !this.twoThree
			},
			getMyLocation(){
				this.map.moveToLocation()
			},
			getLookAll(){
				console.log(232320)
				var mapCtx = uni.createMapContext("mapGis",this);
				mapCtx.includePoints({
				      padding: [ 70,],
				      points: this.getIncludePoints()
				    },)
				// this.$set(this, 'scale', 12);
				// this.$set(this, 'includePoints', this.getIncludePoints());
				
			},
			goHere: function(item) {
				uni.openLocation({
					latitude: parseFloat(item.lat),
					longitude: parseFloat(item.lng),
					name: item.stopName,
					geocode: true,
					success: function(res) {
						console.log(res)
					},
				});
			},
			
			setScrollLeft: function(index) {
				var that = this, 
				windowWidth = that.windowWidth,
				s = 0.150 * windowWidth * index - windowWidth / 2;
				that.$set(that,'scrollLeft', 0);
				setTimeout(function() {
					that.$set(that,'scrollLeft', s);
				}, 20);
			},
			watchStationName: function () {
			  var that = this;
			  that.observe && that.observe.disconnect();
			  that.observe = that.createIntersectionObserver({
			    thresholds: [1],
			    initialRatio: 1
			  });
			  that.observe.relativeTo(".scroll_view", {
			    left: 0,
			    right: 35,
			    bottom: 200
			  }).observe(".station_name.active",(i) => {
				 var systemInfo =  uni.getSystemInfoSync()
			      var s = systemInfo.windowWidth / 2;
				  // console.log("i",i)
				  if(i.intersectionRatio){
					  if(i.intersectionRatio < 1){
						  if(i.boundingClientRect.left < 0){
							  that.$set(that,'leftShow', 1)
						  }
						  if(i.boundingClientRect.left > systemInfo.windowWidth){
							  that.$set(that,'rightShow', 1)
						  }
		
					  } else {
						  if(i.boundingClientRect.left >= 0 && i.boundingClientRect.left < s){
							  console.log(111)
							   that.$set(that,'leftShow',0)
						  }
						
						  if(i.boundingClientRect.left >= s ){
							  console.log(222)
						  	   that.$set(that,'rightShow',0)
						  }
						
					  }
					  
					 
				  }
			  });
			},
			/***地图视野发生变化***/
			bindregionchange (e){
			// 	let map = uni.createMapContext('mapGis');
			// 	var that = this
				
			
			// 	map.getScale({
			// 		success(res) {
				
			// 		map.getCenterLocation({
			// 			success: function success(res1) {
			// 				// 移动地图，查询IPO点，
						
			// 				if(that.scale!=res.scale){
			// 					that.scale = res.scale
			// 					that.initMarker(that.stationList)
			// 					that.addSelectMarker()
			// 					// that.initCarMarker(that.carList)
			// 					that.longitude = res1.longitude
			// 					that.latitude = res1.latitude
			// 					// that.initIncludePoints(that.selectStation,that.carList)	
			// 				}
								
					
			// 			}
			// 		});
			// 		}
			// 	})
			},
			getIncludePoints: function() {
				return this.stationList.map(function(t) {
					return {
						longitude: t.lng,
						latitude: t.lat
					};
				});
			},	
			goBackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			markerTap(e){
				var that = this
				// id number类型 最大限制9位
				let markerId = e.detail.markerId;
				for(var i=0;i<this.stationList.length;i++){
					if(markerId == this.stationList[i]['id']){
						this.$set(this,'selectStationIndex',i)
						this.$set(this,'selectStation',this.stationList[i])
						this.addSelectMarker()
						this.setScrollLeft(i)
						setTimeout(function(){
							that.watchStationName();
							that.$set(that,'leftShow', 0)
							that.$set(that,'rightShow', 0)
						},500)
					} 
				}
			},
			changeStation(index){
				var that = this
				this.$set(this,'selectStationIndex',index)
				this.$set(this,'selectStation',this.stationList[index])
				this.$set(this,'latitude',this.selectStation.lat)
				this.$set(this,'longitude',this.selectStation.lng)
			    this.addSelectMarker()
				
				setTimeout(function(){
					that.watchStationName();
					that.$set(that,'leftShow', 0)
					that.$set(that,'rightShow', 0)
				},500)
				// this.setScrollLeft(index)
				// 刷新站点信息
				// this.initStationMarkers(this.stationsList);
				
			},
			addSelectMarker(){
				var that = this
				// 删除以前的SelectMarker
				that.markers.forEach((el, index) => {
					if(that.selectMarkers&&that.selectMarkers.length){
						if(parseInt('66'+el.id) == parseInt('66'+that.selectMarkers[0].id)){
							that.markers.splice(index,1)
						}
					}
					// if(parseInt('66'+el.id) == parseInt('66'+that.selectMarkers[0].id)){
					// 	that.markers.splice(index,1)
					// }
				})
				
				
				
				that.selectMarkers = []
				var data =[]
				data.push(that.getStationMarkerObj(that.selectStation))
				that.selectMarkers = data
				var markers = that.markers.concat(that.selectMarkers)
	            this.$set(this,'markers',markers)
				
			},
			
			getStationMarkerObj(item){
				var data = {}
				var that = this
				data = {
				   id: parseInt('66'+item.id),
				   latitude:item.lat,
				   longitude: item.lng,
				   iconPath: '/static/images/bus/ic-bus-stop-select.png',
				   width: 32,
				   height: 37,
				   label: that.scale<15?{
						content: item.stopName,
						color: "#1B1B1B",
						fontSize: 12,
						padding: 1,
						textAlign: "center",
						bgColor: "#ffffff",
						borderRadius:5,
						y: "IOS" === that.systemType ? 10 : 7,
						x: -(item.stopName.length % 2 == 0 ? item.stopName.length / 2 * 12 : (item.stopName.length - 1) / 2 * 12 + Math.floor(6)) - 3
					}:''
				}	
				
				return data
			},
		
			getLineDetail: function() {
				let that = this;
				getLineDetail({lineId:that.line_id})
					.then(res => {
						let lineInfo = res.data;
					
						that.$set(that, 'lineInfo', lineInfo);
						that.$set(that, 'stationList', lineInfo.lineStations);
						that.$set(that, 'includePoints', this.getIncludePoints());
						var routes = JSON.parse(lineInfo.routes)
						that.initPolyLine(routes)
						that.initMarker(lineInfo.lineStations)
						that.setLineStation();
						that.getNearestStopFun();
						
						setTimeout(function () {
						  that.watchStationName();
						}, 1000);
						
					})
					.catch(err => {
						console.log('err', err)
						//状态异常返回上级页面
						return that.$util.Tips({
							title: err.toString()
						}, {
							tab: 3,
							url: 1
						});
					});
			},
			initPolyLine(route){
				var that = this
				that.polyline = []
				that.points = []
				route.forEach(function(item){
					if(item['lat'] && item['lng']){
						that.points.push({latitude: item['lat'], longitude: item['lng']})
					} else {
						that.points.push({latitude: item[1], longitude: item[0]})
					}
					
				})
				
				// #ifdef MP-WEIXIN 
				var polyline = [{//指定一系列坐标点，从数组第一项连线至最后一项
							points:that.points,
							color:"#007AFF",//线的颜色
							width:9,//线的宽度
							borderColor: "#007AFF",
							dottedLine: false,
							borderWidth: true,
							arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
							 iconWidth:10,
						}]
				// #endif	
				// #ifdef  APP-PLUS
				var polyline = [{//指定一系列坐标点，从数组第一项连线至最后一项
							points:that.points,
							color:"#007AFF",//线的颜色
							width:12,//线的宽度
							borderColor: "#007AFF",
							dottedLine: false,
							borderWidth: true,
							arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
						}]
				// #endif	
				// #ifdef MP-ALIPAY
				var polyline = [{//指定一系列坐标点，从数组第一项连线至最后一项
							points:that.points,
							color: "#007AFFDD",
							width: 7,
							dottedLine: false
							// iconWidth:10,
						}]
				// #endif			
						// color: "#FF0000DD",
						// width: 5,
						// dottedLine: false
			    that.$set(that,'polyline',polyline)			
				that.polyline = polyline
			},
			
			initMarker(stations){
				var that = this
				var data =[]
				stations.forEach(function(item, i){
					item.lng = item.lng
					item.lat = item.lat
					data.push(that.getMarkerObj(stations,item, i,that))
				})
				that.markers = data
			},
			getMarkerObj(stations,item,i,that){
				var data = {}
				// 当前站点，修改图标，显示站点名称
					
					if(i==0){ //起點
						data = {
						   id: item.id,　	
						   latitude:item.lat,
						   longitude: item.lng,
						   iconPath: '/static/images/bus/start_point.png',
						   width:20,
						   height:20,
						  
						   label: {
								content: item.stopName,
								color: "#1B1B1B",
								fontSize: 12,
								padding: 1,
								textAlign: "center",
								bgColor: "#ffffff",
								borderRadius:5,
								y: "IOS" === that.systemType ? 10 : 7,
								x: -(item.stopName.length % 2 == 0 ? item.stopName.length / 2 * 12 : (item.stopName.length - 1) / 2 * 12 + Math.floor(6)) - 3
					
							}
						 }
					} else if(i==stations.length-1){ //終點
						data = {
						   id: item.id,
						   latitude:item.lat,
						   longitude: item.lng,
						   iconPath: '/static/images/bus/end_point.png',
						   width:20,
						   height:20,
						  
						   label:{
								content: item.stopName,
								color: "#1B1B1B",
								fontSize: 12,
								padding: 1,
								textAlign: "center",
								bgColor: "#ffffff",
								borderRadius:5,
								y: "IOS" === that.systemType ? 10 : 7,
								x: -(item.stopName.length % 2 == 0 ? item.stopName.length / 2 * 12 : (item.stopName.length - 1) / 2 * 12 + Math.floor(6)) - 3
							}
					 }
					}else{
						data = {
						   id: item.id,
						   latitude:item.lat,
						   longitude: item.lng,
						   iconPath: '/static/images/bus/bus-staion-bule.png',
						   width:15,
						   height:15,
						
						   label:that.scale>=15?{
							content:item.stopName,
							color: "#1B1B1B",
							fontSize: 12,
							padding: 5,
							textAlign: "center",
							bgColor: "#ffffff",
							borderRadius:5,
							y: "IOS" === that.systemType ? 10 : 7,
							x: -(item.stopName.length % 2 == 0 ? item.stopName.length / 2 * 12 : (item.stopName.length - 1) / 2 * 12 + Math.floor(6)) - 3
						  }:''
						}
					}
				
				return data
			},
			
			setLineStation(){
				var stations = this.stationList;

				this.$set(this,'selectStationIndex',0)
				this.$set(this,'selectStation',this.stationList[0])
				if(stations && stations.length){						
					stations.forEach((t,index) => {
						 this.$set(this.stationList[index],'subway', !!/地铁站/gi.test(t.stopName))
					})
				}
			},
			getNearestStopFun: function () {
			  var that = this;
			  
			  uni.getLocation({
			    type: "gcj02",
			    success: function (e) {
			      var stations = that.stationList,
			        lng1 = e.longitude,
			        lat1 = e.latitude,
			        disList = [];
					if(stations && stations.length){						
						stations.forEach(function(t){
							 disList.push(b_util.getDistanceNew({lat1: lat1,lng1: lng1,lat2: t.lat,lng2: t.lng}))
						})
					}
					if(disList.length){
						var mins = Math.min.apply(Math, disList),
						  minItem = disList.indexOf(mins);
						  
						  if(minItem > -1) {
							  that.nearestStation = stations[minItem]
						  }
						  
					}
			     
			    }
			  });
			},
			openWxKf(){
				openKf()
			},
			
			
			// S 移动拖拽
			movableChange(e) {
				// console.log('e', e)
				if(e.detail.source == ''){
					this.moveFlag = false
					return;
				} else{
					this.moveFlag = true
				}
				let y = e.detail.y;
				this.dragY = y
				
				// this.initY = this.dragY
				
				let c_h = this.cHeightNum + this.dragY;
				 // #ifdef  APP-PLUS
				 this.mapHeight = c_h+30;
				 // #endif
				 
				 // #ifndef  APP-PLUS
				 if (c_h >= 250) {
				 	this.mapHeight = c_h+30;
				 }
				 // #endif
				
				// console.log('this.mapHeight', this.mapHeight)
				// console.log('this.dragY',this.dragY)
				

			},
			touchEnd(e) {
				console.log('ed', e)
				var fx ;
				// if(this.initY == 0){
				// 	// 向上
				// 	fx = 1
				// } else {
				// 	fx = 0
				// }
				if(!this.moveFlag) return;
				// this.initY = this.dragY
				
				let c_h = this.cHeightNum + this.dragY;
				// #ifdef  APP-PLUS
				this.mapHeight = c_h+30;
				// #endif
				
				// #ifndef  APP-PLUS
				if (c_h >= 250) {
					this.mapHeight = c_h+30;
				}
				// #endif
				// console.log('this.mapHeight', this.mapHeight)
				// console.log('this.dragY',this.dragY)
				setTimeout(() => {
					if ( this.dragY > -100 ) {
						this.initY = 0
					} else if( this.dragY  > (-this.windowHeight/3) && this.dragY  < (-100)) {
						this.initY = -(this.windowHeight/3);
					} else {
						this.initY = -(this.windowHeight- this.statusBarHeight/this.pixelRatio - 60);
					}
				}, 100)
 
			},
			openHide() {
				if (this.drageIco == 'up') {
					this.initY = 0
				} else {
					this.initY = -(this.windowHeight - 250 - 180);
				}
			},
			// E 移动拖拽
			
			yulan:function(images){
				   // 预览图片

				   var that = this
			
				   uni.previewImage({
					current: 0,   
				   	urls: images,
					fail(err) {
						console.log('err', err)
					}
				   });
			},
			
 
		}
	};
</script>
 
<style lang="scss">
	.event-help-details {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}
 
	.back-last-page {
		width: 72rpx;
		height: 72rpx;
		position: fixed;
		left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999999;
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 rgba(0,0,0,.14);
		border-radius: 50%;
	}
	.image-back{
		height: 44rpx;
		width: 44rpx;
	}
 
	.map-content {
		width: 100%;
		background-color: #eee;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		.map-gis {
			width: 100%;
			height: 100%;
		}
	}
 
	// S 滑动块
	.move-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 180px;
		z-index: 99;
	}
 
	.move-incontent {
		width: 100%;
		background-color: #fff;
		border-radius: 26rpx;
	}
 
	.move-drag-ico {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
 
		.drag-img {
			width: 50rpx;
			height: 30rpx;
			transition: all .3s;
		}
 
		.drag-transform {
			transform: rotate(-180deg);
		}
	}
 
	// 滚动内容
	.move-infos-body {}
 
	// E 滑动块
	.slide-bar {
	    align-items: center;
	    display: flex;
	    justify-content: center;
	    padding: 16rpx 0 20rpx;
	}
	
	.slide-bar .line-bar {
	    background: #dedede;
	    border-radius: 8rpx;
	    height: 8rpx;
	    width: 80rpx;
	}
	
	.buy-btn-wrapper {
	    align-items: center;
	    background: #fff;
	    bottom: 0rpx;
	    box-shadow: 0 -8rpx 10rpx -4rpx rgba(0,0,0,.08);
	    display: flex;
	    justify-content: space-between;
	    left: 0rpx;
	    padding: 20rpx 0;
	    position: fixed;
	    right: 0rpx;
	    vertical-align: top;
	    z-index: 100;
	}
	
	.buy-btn {
	    background: #007AFF;
	    border-radius: 50rpx;
	    color: #fff;
	    flex: 0 0 200rpx;
	    font-size: 35rpx;
	    font-weight: 600;
	    height: 80rpx;
	    line-height: 80rpx;
	    margin-right: 30rpx;
	    text-align: center;
	}
	
	.buy-btn.disable {
	    background: #d2dae8;
	}
	
	.buy-btn-wrapper .action-group {
	    align-items: center;
	    display: flex;
	    flex: 1;
	    justify-content: space-around;
	    margin-right: 32rpx;
	}
	
	.buy-btn-wrapper .action-group .btn {
	    flex: 1;
	    text-align: center;
	}
	
	.buy-btn-wrapper .action-group .btn.share {
	    background: #fff;
	    border-radius: 0;
	    line-height: 1;
	    margin: 0;
	    padding: 0;
	}
	
	.buy-btn-wrapper .action-group .btn image {
	    height: 44rpx;
	    vertical-align: top;
	    width: 44rpx;
	}
	
	.buy-btn-wrapper .action-group .btn view {
	    color: #666;
	    font-size: 20rpx;
	}
	.line-title {
	    align-items: center;
	    display: flex;
	    margin-bottom: 4rpx;
	    padding-left: 40rpx;
	}
	
	.line-title .name {
	    color: #222;
	    font-size: 38rpx;
	    font-weight: 700;
	    line-height: 66rpx;
	    margin-right: 16rpx;
	    // max-width: 280rpx;
	    text-overflow: ellipsis;
	}
	.line-station {
	    align-items: center;
	    color: #222;
	    display: flex;
	    font-size: 28rpx;
	    font-weight: 700;
	    height: 52rpx;
	    padding-left: 40rpx;
	}
	
	.line-station .name {
	    max-width: 300rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.line-duration {
	    align-items: center;
	    display: flex;
	    height: 48rpx;
	    padding-left: 40rpx;
	}
	
	.line-station .icon-arrow-b {
		height: 8px;
		margin: 5px 5px;
		width: 15px;
	}
	.line-duration .line-seat-text {
	    background: #ff6e0e;
	    border-radius: 6rpx;
	    color: #fff;
	    font-size: 20rpx;
	    font-weight: 700;
	    line-height: 28rpx;
	    margin-right: 22rpx;
	    padding: 4rpx 15rpx;
	}
	
	.line-duration .line-distance {
	    color: #666;
	    font-size: 24rpx;
	    line-height: 34rpx;
	}
	.line-zd{
		flex: 1;
		overflow: hidden;
	}
	.line_s .arrow {
	    border: 20rpx solid transparent;
	    border-top-color: #fff;
	    height: 0rpx;
	    margin-bottom: 10rpx;
	    margin-left: -20rpx;
	    width: 0rpx;
	}
	.scroll_view .line_wrapper {
	    display: flex;
	    flex: 1;
	    margin-left: 64rpx;
	    margin-top: 56rpx;
	}
	
	.scroll_view .line_wrapper .line_s {
	    width: 126rpx;
	}
	
	.scroll_view .line_wrapper .line_s .station-arrive-time {
	    color: #666;
	    font-size: 24rpx;
	    line-height: 34rpx;
	    margin-top: 20rpx;
	    text-align: center;
	    transform: translateX(-50%);
	}
	
	.scroll_view .line_wrapper .line_s .bar {
	    position: relative;
	    width: 126rpx;
	}
	
	.scroll_view .line_wrapper .line_s .bar .bar_line {
	    background-color: #007AFF;
	    height: 16rpx;
	    position: relative;
	    width: 126rpx;
	}
	
	.scroll_view .line_wrapper .line_s .bar .bar_line .bar_arrow {
	    height: 16rpx;
	    left: 50%;
	    position: absolute;
	    transform: translateX(-50%);
	    width: 14rpx;
	}
	
	.line_wrapper .line_s .bar .station {
	    align-items: flex-start;
	    display: flex;
	    margin-top: 4rpx;
	}
	
	.line_wrapper .line_s .bar .station .station_name {
		margin-top: 5px;
	    color: #222;
	    font-size: 28rpx;
	    line-height: 36rpx;
	    min-height: 500rpx;
	    padding: 0 20rpx;
	    text-align: center;
	    transform: translateX(-35rpx);
	    width: 30rpx;
	    word-break: break-word;
	}
	
	.line_wrapper .line_s .bar .station .nearest-text {
	    border-radius: 4rpx;
	    color: #00aa00;
	    font-size: 18rpx;
	    line-height: 20rpx;
	    margin-top: 8rpx;
	    padding: 4rpx 0;
	    text-align: center;
	    margin-left: -8rpx;
	    width: 26rpx;
	}
	
	.bar .station .station_name .no {
	    color: grey;
	    font-size: 24rpx;
	}
	
	.scroll_view .line_wrapper .line_s .bar .bar_line.end {
	    background: #b0cdff;
	    border-radius: 22rpx;
	    height: 11rpx;
	    position: relative;
	    width: 0rpx;
	}
	
	.line_wrapper .line_s .bar .station .station_name.active,.line_wrapper .line_s .bar .station .station_name.active .no {
	    color: #77ea90;
	    font-size: 30rpx;
	    font-weight: 700;
	}
	
	.line_wrapper .line_s .bar .station .station_name.active .off {
	    color: #ff5c32;
	}
	
	.bar .station .station_name .icon {
	    height: 40rpx;
	    margin-left: -5rpx;
	    margin-top: 12rpx;
	    width: 40rpx;
	}
	
	.bar .station .station_name .icon.icon-pos-nav {
	    height: 42rpx;
	    margin-top: 15rpx;
	    transform: translateX(-6rpx);
	    width: 42rpx;
	}
	
	.bus.hide {
	    display: none;
	}
	
	.bus.active {
	    display: block;
	}
	
	.line_stop_pos {
	    height: 36rpx;
	    left: -18rpx;
	    position: absolute;
	    top: -10rpx;
	    width: 36rpx;
	}
	
	.line_stop_pos.selected {
	    height: 48rpx;
	    left: -24rpx;
	    top: -16rpx;
	    width: 48rpx;
	}
	
	.hover_station {
	    background-color: #fff;
	    border-radius: 4rpx;
	    box-shadow: 0 4rpx 20rpx 2rpx rgba(0,0,0,.13);
	    box-sizing: border-box;
	    color: #007AFF;
	    display: flex;
	    flex-direction: column;
	    font-size: 30rpx;
	    font-weight: 700;
	    height: 280rpx;
	    line-height: 36rpx;
	    overflow: hidden;
	    padding: 16rpx 10rpx;
	    position: fixed;
	    text-align: center;
	    width: 64rpx;
	    word-break: break-word;
	    z-index: 99;
	}
	
	.hover_station.left {
	    left: 8rpx;
	}
	
	.hover_station.right {
	    right: 8rpx;
	}
	
	.hover_station .icon-arrow-c {
	    flex: 0 0 44rpx;
	    margin-bottom: 10rpx;
	    width: 44rpx;
	}
	
	.hover_station .name {
	    flex: 1;
	    overflow: hidden;
	}
	
	.hover_station .off {
	    color: #ff5c32;
	}
	
	.icon-action {
		padding-bottom: 2px;
	    height: 80rpx;
	    position: absolute;
	    right: 10rpx;
	    width: 80rpx;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 0 9px 0 rgba(123,131,143,0.30);
		
	}
	

	.gpslocation {
	    top: -110rpx;
	}
	
	.quanlan {
	    top: -210rpx;
	}
	
	.twothree {
	    top: -310rpx;
	}
	.icon-foot{
		font-size: 25px !important;
		margin-bottom: 8px;
		color: #1f1b1b !important;
	}
	.icon-foot-active{
		color: #ff5500!important;
	}
	
	.layer{
		// width: 100%;
		// display: flex;
		// position: absolute;
		// left: 0;
		// top: 0;
	}
	.mini-layer{
		height: 100%;
		background: #fff;
		box-shadow: 0 -10rpx 20rpx 0 rgba(0,0,0,.09);
		border-radius: 20rpx 20rpx 0 0;
		flex-direction: column;
		align-items: center;
	}
</style>